<template>
  <div class="reg_box">
    <router-link to="/Login">
      <div class="back">&lt;</div>
    </router-link>
    <p>欢迎注册TOPSPORTS</p>
    <div class="msg">
      <div>
        手机号码<input
          type="text"
          placeholder="请输入您的手机号"
          class="phone"
          v-model="username"
        />
      </div>
      <br />
      <div>
        密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码<input
          type="password"
          placeholder="请输入密码"
          class="pwd1"
          v-model="userpwd1"
        />
      </div>

      <br />
      <div>
        确认密码<input
          type="password"
          placeholder="请再次输入密码"
          class="pwd2"
          v-model="userpwd2"
        />
      </div>
      <button @click="regSave">注册</button>
      <router-link to="/Login"><i>已有账号，直接登陆</i></router-link>
    </div>
    <div class="wei">
      <img src="image/weichat.jpg" alt="" />
    </div>
  </div>
</template>

<script>
import axios from "axios";
import Vue from "vue";
import { Dialog } from "vant";

// 全局注册
Vue.use(Dialog);
export default {
  name: "reg",
  data() {
    return {
      username: "",
      userpwd1: "",
      userpwd2: "",
    };
  },
  methods: {
    regSave() {
      const checkPhone = /^1[3|4|5|7|8][0-9]{9}$/;
      const checkPwd = /^^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/;
      console.log(this.username);
      if (checkPhone.test(this.username)) {
        if (checkPwd.test(this.userpwd1)) {
          if (this.userpwd1 == this.userpwd2) {
            axios({
              url: "http://localhost:3000/vips",
            })
              .then((res) => {
                let flag = false;
                for (let i in res.data) {
                  console.log(res.data[i].username);
                  if (res.data[i].username == this.username) {
                    flag = true;
                  }
                }
                if (flag == true) {
                  Dialog.alert({
                    message: "账号已被注册，请直接登录！",
                  }).then(() => {
                    this.$router.push({ path: "/Login" });
                  });
                } else {
                  axios({
                    url: "/vips",
                    method: "post",
                    data: `username=${this.username}&userpass=${this.userpwd1}`,
                  })
                    .then((res) => {
                      console.log(res.data)
                      Dialog.alert({
                        message: "注册成功，请直接登录！",
                      }).then(() => {
                        this.$router.push({ path: "/Login" });
                      });
                    })
                    .catch((err) => {
                      console.log("出错了", err);
                    });
                }
              })
              .catch((err) => {
                console.log("出错了", err);
              });
          } else {
            Dialog.alert({
              message: "两次密码必须一致",
            }).then(() => {
              this.userpwd2 = "";
            });
          }
        } else {
          Dialog.alert({
            message: "密码必须包含字母和数字,且必须在6~18位之间!",
          }).then(() => {
            this.userpwd1 = "";
            this.userpwd2 = "";
          });
        }
      } else {
        Dialog.alert({
          message: "请输入合法的手机号！",
        }).then(() => {
          this.username = "";
          this.userpwd1 = "";
          this.userpwd2 = "";
        });
      }
    },
  },
  components: {},
};
</script>

<style>
html,
body {
  height: 100%;
}
html {
  font-size: 26.67vw;
}
body {
  font-size: 16px;
  display: flex;
  flex-direction: column;
}
.reg_box {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}
.reg_box .back {
  width: 100%;
  height: 0.55rem;
  font-size: 0.3rem;
  line-height: 0.55rem;
  padding-left: 0.1rem;
}
.reg_box p {
  width: 100%;
  height: 0.75rem;
  line-height: 0.75rem;
  font-size: 0.24rem;
  font-weight: 700;
  text-align: center;
  line-height: 0.75rem;
}
.reg_box > .msg {
  width: 100%;
  height: 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}
.reg_box > .msg > div {
  width: 3.08rem;
  height: 0.45rem;
  background-color: #f4f4f4;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  font-size: 0.14rem;
}
.reg_box > .msg > div > input {
  border: none;
  outline: none;
  background-color: #f4f4f4;
}
.reg_box > .msg i {
  height: 0.2rem;
  display: block;
  font-size: 0.14rem;
  margin-top: 0.1rem;
  line-height: 0.2rem;
  color: #000;
  position: relative;
  left: 0.9rem;
}
.reg_box button {
  width: 3.08rem;
  height: 0.45rem;
  background-color: #888888;
  color: #fff;
  font-size: 0.18rem;
  text-align: center;
  line-height: 0.45rem;
  border: none;
  outline: none;
  margin: 0 auto;
  margin-top: 0.1rem;
}
.reg_box .wei {
  position: absolute;
  bottom: 0.3rem;
  width: 100%;
}
.reg_box .wei img {
  width: 1.85rem;
  height: auto;
  margin: 0 auto;
}
</style>
